<!--
 * @Author: your name
 * @Date: 2022-04-25 16:09:28
 * @LastEditTime: 2022-05-05 14:25:19
 * @LastEditors: liuying liuy@augurit.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agcim-viewer\src\widgets\BasicRoam\component\importRoamList.vue
-->
<template>
    <ag-popup class="record-panel" title="导入漫游" v-model="visible"
        @onConfirm="onSubmitRecor" @onCancel="onCancel" :confirmVal="'导入'" :cancelVal="'取消'" :confirm="true"
        :cancel="true">
        <div class="daoru-content">
        <el-upload
        class="upload-demo1"
        ref="upload"
        multiple
        :on-change="onSuccess"
        :auto-upload="false"
        accept=".json"
        :on-remove="handleRemove"
        action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">(只能上传json格式)</div>
        </el-upload>
        </div>
    </ag-popup>
</template>
<script>
    import AgPopup from '@/views/components/precut/AgPopup.vue';

    export default {
        name: 'importRoamList',
        props: {
            checkList: {
                type: Array,
                default () {
                    return [];
                },
            },
        },
        components: {
            'ag-popup': AgPopup,
        },
        data() {
            return {
                visible: false,
                fileList: [],
                roamFile: []
            };
        },
        mounted() {
            this.roamFile = [];
        },
        methods: {
            onCancel() {
                this.visible = false;
            },
            onShow() {
                this.visible = true;
            },
            onSuccess(file,fileList) {
                let that = this;
                let reader = new FileReader();
                reader.readAsText(file.raw);
                reader.onload = function(e) {
                    file.status = 'success';
                    file.percentage = 10;
                    that.roamFile = [];
                    that.roamFile = that.roamFile.concat(JSON.parse(e.target.result))
                }
            },
            handleRemove(file,fileList) {
                let that = this;
                let reader = new FileReader();
                reader.readAsText(file.raw);
                reader.onload = function(e) {
                   let deleteItem =  JSON.parse(e.target.result);
                   for(let i=0;i<deleteItem.length;i++) {
                        that.roamFile = that.roamFile.length&&that.roamFile.filter(item => {
                            return item.name !== deleteItem[i].name
                        })
                   }    
                }
            },
            onSubmitRecor() {
                this.$emit('importList', this.roamFile);
            },
            clearUpload() {
                this.$refs.upload.clearFiles();
            }
        },
    };
</script>
<style scoped>
    .record-panel {
        width: 350px;
        left: 60%;
        top: 100px;
    }

    .record-panel .title {
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-indent: 20px;
    }
    .daoru-content {
        padding:20px;
    }
    ::v-deep .upload-demo1 .el-upload-list__item-name {
        color:#fff;
        text-decoration: none;
        
    }
    ::v-deep .upload-demo1 .el-upload-list__item-name:hover {
        color:#fff;
    }
    ::v-deep .upload-demo1 .el-upload-list__item:hover {
        background-color: transparent;
    }
    ::v-deep .upload-demo1 .el-icon-close:before {
        content:none;
    }
    ::v-deep .upload-demo1 .el-icon-close {
        background: url('../img/gabsh.png');
        width:14px;
        height: 14px;
        background-size:100%;
        color:transparent;
        display:block;
    }
    ::v-deep .upload-demo1 .el-icon-circle-check:before {
        content:none;
    }
    ::v-deep .upload-demo1 .el-icon-document:before {
        background: url('../img/attachment.png');
        width:14px;
        height: 14px;
        background-size:100%;
        color:transparent;
    }
    .upload-demo1 {
        position:relative;
    }
    .record-panel .el-upload__tip {
        color:#fff;
        position:absolute;
        top:-1px;
        left:100px;
    }
</style>